<template>
  <div>
    <el-breadcrumb separator="/"> <!--面包屑never-->
      <el-breadcrumb-item :to="{ path: '/TestProductTemplateConfiguration'}"><i class="el-icon-s-home" style="margin-right: 15px;font-size: 16px"></i>试品信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <el-card shadow="always" class="cardPosition"><!--统计、搜索、新建方案card-->
        <el-form ref="infoForm" :rules="rules" :model="infoForm" label-width="130px" >
          <el-row>
            <el-col :span="8"><el-form-item label="试品类型" class="form-item" prop="pkId">
              <el-select v-model="infoForm.pkId" placeholder="请选择试品类型"     style="width: 350px" clearable>
                <el-option v-for="item in prodTypeList" :key="item.pk_id" :label="item.pk_ch_name" :value="item.pk_id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="8">
              <el-form-item label="委试号"  class="form-item" prop="testNumber">
                <el-input  v-model="infoForm.testNumber" placeholder="请输入委试号" @blur="getInfoCollection"  style="width: 350px" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="试品编号"  class="form-item" prop="prodNumber">
                <el-input  v-model="infoForm.prodNumber" placeholder="请输入试品编号" size="small" style="width: 350px" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="相数"  class="form-item">
                <el-select v-model="infoForm.phases" placeholder="请选择相数"    style="width: 350px" clearable>
                  <el-option v-for="item in phasesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="活门"  class="form-item">
                <el-select v-model="infoForm.valve" placeholder="请选择活门"    style="width: 350px" clearable>
                  <el-option v-for="item in valveList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="相距中心距(mm)"  class="form-item">
                <el-input  v-model="infoForm.centerNum" placeholder="请输入相距中心距" size="small" style="width: 350px" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="观察窗"  class="form-item">
                <el-radio-group v-model="infoForm.hasWindow">
                  <el-radio v-for="item in windowList" :label="item.value" :key="item.value">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="是否充气"  class="form-item">
                <el-radio-group v-model="infoForm.inflation" >
                  <el-radio v-for="item in inflationList" :label="item.value" :key="item.value">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="充气类型"  class="form-item">
                <el-select v-model="infoForm.gasId" placeholder="请选择充气类型"  :disabled="gasFlag"  style="width: 350px" clearable>
                  <el-option v-for="item in gasList" :key="item.gas_id" :label="item.gas_kind" :value="item.gas_id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="充气压力(Mpa)"  class="form-item" >
                <el-input  v-model="infoForm.pressure" :disabled="pressureFlag" placeholder="请输入充气压力" size="small" style="width: 350px" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
            <el-form-item label="试品元件"  class="form-item">
              <el-select v-model="infoForm.elementList" multiple placeholder="请选择试品元件" style="width: 350px">
                <el-option
                  v-for="item in elementList"
                  :key="item.unit_id"
                  :label="item.unit_name"
                  :value="item.unit_id">
                </el-option>
              </el-select>
              <div class="elementList-show" v-if="parameterShow">
                <span>输入真空灭弧室编号：</span>
                <el-form  label-width="90px" >
                  <el-form-item label="A"  >
                    <el-input  v-model="infoForm.parameterList[0]" placeholder="请输入..." size="small" style="width: 350px" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="B"  >
                    <el-input  v-model="infoForm.parameterList[1]" placeholder="请输入" size="small" style="width: 350px" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="C"  >
                    <el-input  v-model="infoForm.parameterList[2]" placeholder="请输入" size="small" style="width: 350px" clearable></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-form-item>
        </el-form>
        <div style="text-align:center;margin-top:50px" >
          <el-button size="small" class="textBtn" @click="resetForm">重 置</el-button>
          <el-button @click="saveInfoForm" type="primary" style="background-color: #6C59DD;border-color: #6C59DD; margin-left: 200px;" size="small" >确 定</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 引入需要用到的第三方nodejs库，如日期计算等
// 需要先通过npm安装第三方组件包，然后在代码中使用
// npm install xxx 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
import moment from 'moment';
import sessionStorage from '../../public/storage.js';
export default {
  data() {
    
    return {
      // 表单数据
      infoForm:{
      prodId:'',
      pkId:"", // 试品类型
      testNumber:"", // 委试号
      prodNumber:"", // 试品编号
      elementList:[], // 试品元件
      centerNum: 0, // 相间中心距
      parameterList:[], // 真空灭弧
      phases:0, // 相数
      valve:0, // 活门
      hasWindow:0, // 观察窗
      inflation:0, // 是否充气
      gasId:0, // 充气类型
      pressure:'', // 充气压力
      },
      parameterShow:false, // 选择真空灭弧展示框
      gasFlag:true, 
      pressureFlag:true,
      // 试品类型数据
      prodTypeList:[],
      // 充气类型
      gasList:[],
      // 相数
      phasesList:[{label:'单相',value:0},{label:'两相',value:1},{label:'三相',value:2}],
      // 活门
      valveList:[{label:'无活门',value:0},{label:'金属活门',value:1},{label:'绝缘活门',value:2}],
      // 观察窗
      windowList:[{label:'无',value:0},{label:'有',value:1}],
      //是否充气
      inflationList:[{label:'否',value:0}, {label:'是',value:1},],
      // 试品元件
      elementList:[],
      // 校验规则
      rules:{
        testNumber: [
            { required: true, message: '请输入委试号', trigger: 'blur' },
            {  max: 30, message: '长度不超过30个字符', trigger: 'blur' }
          ],
          prodNumber: [
            { required: true, message: '请输入试品编号', trigger: 'blur' },
            {  max: 30, message: '长度不超过30个字符', trigger: 'blur' }
          ],
      }
    };
  },
  created(){
    this.getProdNameData()
  },
  mounted () {
    
  },
  methods: {
    //获取下拉框信息
    async getProdNameData() {
      //获取试品名称下拉框选项及所有基本信息
      let ret = await this.$http.get("/testProdTemplate/getProductKind",);
      this.prodTypeList=ret.result;
      // 获取试品元件下拉框选项及所有基本信息
      const res = await this.$http.get('/testProdTemplate/getProductUnitLib',{})
      this.elementList = res.result
      // 获取充气类型
      const rett = await this.$http.get('/testPlan/getGasKind',{})
      rett.result.push({gas_id:0,gas_kind:'请选择'})
      this.gasList = rett.result
      },
      // 重置表单
      resetForm(){
        this.infoForm = {
          prodId:'',
          pkId:"", // 试品类型
          testNumber:"", // 委试号
          prodNumber:"", // 试品编号
          elementList:[], // 试品元件
          centerNum: 0, // 相间中心距
          parameterList:[],
          phases:0, // 相数
          valve:0, // 活门
          hasWindow:0, // 观察窗
          inflation:0, // 是否充气
          gasId:0, // 充气类型
          pressure:'', // 充气压力
        }
        this.$refs['infoForm'].resetFields();
      },
      // 保存表单
      saveInfoForm (){
        // 校验
      //   if (!this.infoForm.parameterList.some(item =>{
      //     return item.length>0
      //  })&& this.parameterShow) {
      //   return this.$message({message:'请至少输入一个真空灭弧室编号',type: 'warning'});
      // }
        this.$refs['infoForm'].validate(async (valid) => {
          if (valid) {
            console.log(this.infoForm)
            if (this.infoForm.elementList.length==0){
   
            }
            let res=await this.$http.post('/testProdTemplate/saveCollectionInfo', {sendInfo:this.infoForm})
            if(res.code==200){ 
              this.infoForm = {
                prodId:'',
                pkId:"", // 试品类型
                testNumber:"", // 委试号
                prodNumber:"", // 试品编号
                elementList:[], // 试品元件
                centerNum: 0, // 相间中心距
                parameterList:[],
                phases:0, // 相数
                valve:0, // 活门
                hasWindow:0, // 观察窗
                inflation:0, // 是否充气
                gasId:0, // 充气类型
                pressure:'', // 充气压力
                }
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
            }else if (res.code==300){
              this.$message({message:res.message,type: 'warning'});
            }
            else {
            this.$message.error('保存失败');
            }
          } else {
            this.$message.error('保存失败，请检查输入信息');
            return false;
          }
        });
      },
      // 获取表单信息
     async getInfoCollection(){
        let res=await this.$http.get('/testProdTemplate/getCollectionInfo',{params:{testNumber:this.infoForm.testNumber}} )
        if (res.result.length!==0) {
          const data = res.result[0]
                this.infoForm.pkId=data.pk_id, // 试品类型
                this.infoForm.testNumber=data.test_number, // 委试号
                this.infoForm.prodNumber=data.prod_number, // 试品编号
                this.infoForm.centerNum= data.central_distance?data.central_distance:0, // 相间中心距
                this.infoForm.elementList = data.elementList // 元件
                this.infoForm.parameterList=data.parameterList, // 真空灭弧
                this.infoForm.phases=data.phases, // 相数
                this.infoForm.valve=data.valve, // 活门
                this.infoForm.hasWindow=data.has_window, // 观察窗
                this.infoForm.inflation=data.inflation, // 是否充气
                this.infoForm.gasId=data.gas_id? data.gas_id:0, // 充气类型
                this.infoForm.pressure=data.pressure // 充气压力
                this.infoForm.prodId = data.prod_id
                
        
        }
      }
  },
  watch:{
    // 侦听表单信息
    infoForm:{
      deep:true, //深度监听设置为 true
     handler:function(newV,oldV){
       if (newV.inflation == 1){
        this.gasFlag = false
       }else {
         newV.gasId = 0
        this.gasFlag = true
       }
        if (newV.gasId!=0) {
          this.pressureFlag = false
        } else {
          newV.pressure = ''
          this.pressureFlag = true
        }
      if (newV.elementList.some(item=>{
       return item == 18
      })) {
        this.parameterShow = true
      }else {
        if (newV.parameterList.length>0) {
          newV.parameterList = []
        }
        this.parameterShow = false
      }
     }
    }
  }
  
}
</script>
<style lang="scss" scoped>
@import "./InfoCollection.scss";
</style>
